<template>
  <div>
    <el-drawer v-model="drawer" :title="title" :size="size">
      <div class="body">
        <div class="content">
          <slot></slot>
        </div>
        <div class="bot"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

//drawer控制抽屉显示 true显示 false不显示
const drawer = ref(false);

//接收父组件传递的值
defineProps({
  title: {
    type: String,
    default: "",
  },
  size: {
    default: "45%",
  },
});

// Drawer 打开的回调
function open() {
  drawer.value = true;
}

// Drawer 关闭的回调
function close() {
  drawer.value = false;
}

//向外暴露子组件的方法
defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    height: 85%;
    // background: #000;
    overflow-y: scroll;
  }
}
</style>
